<template>
  <div class="box">
    <header class="header">
      <van-nav-bar title="注册"
                   @click-left="$router.go(-1)"
                   left-arrow></van-nav-bar>
      <div class="content">
        <van-form validate-first
                  @failed="onFailed"
                  @submit="onSubmit">
          <van-field v-model="tel"
                     name="tel"
                     clearable
                     placeholder="请输入手机号码"
                     :rules="[{ required: true, pattern: pattern1, message: '请输入正确的手机号码' }]" />
          <van-field v-model="password"
                     name="password"
                     clearable
                     placeholder="请输入密码"
                     type="password"
                     :rules="[{ required: true, pattern: pattern2, message: '密码长度不能少于6位' }]" />
          <div style="margin: 16px;">
            <van-button round
                        block
                        color="#f66"
                        native-type="submit">
              注册
            </van-button>
          </div>
        </van-form>
      </div>
    </header>
  </div>
</template>
<script>
import Vue from 'vue'
import { Button, NavBar, Form, Field, Toast } from 'vant'
Vue.use(Button)
Vue.use(NavBar)
Vue.use(Form)
Vue.use(Field)
Vue.use(Toast)
export default {
  data () {
    return {
      tel: '',
      password: '',
      pattern1: /^1[3456789]\d{9}$/,
      pattern2: /\d{6}/
    }
  },
  methods: {
    onFailed (errorInfo) {
      console.log('errorInfo', errorInfo)
      Toast.fail(errorInfo.errors[0].message)
    },
    onSubmit () {
      console.log('注册')
      // register({
      //   tel: this.tel,
      //   password: this.password
      // }).then(res => {
      //   console.log(res.data)
      //   const { code } = res.data
      //   switch (code) {
      //     case '10400':
      //       Toast('信息填写不完整')
      //       break
      //     case '10666':
      //       Toast('注册成功')
      //       this.$router.replace('/login')
      //       break
      //     case '10606':
      //       Toast('该用户已注册')
      //       break
      //     default:
      //       break
      //   }
      // })
    }
  }
}
</script>
